<template>
  <div class="">
    <el-table
      class="table"
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column prop="chainName" label="产业链名称">
        <template #default="{row}">
          <p>
            <img class="img" src="@/assets/img/personal/industry.svg" />{{
              row.chainName
            }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="insertDate" label="订阅时间" width="160">
      </el-table-column>
      <el-table-column prop="name" label="操作" width="160">
        <template #default="{row}">
          <el-button type="text" @click="handleCancel(row)">取消订阅</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      hide-on-single-page
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
      :current-page.sync="searchInfo.ipi"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {},
      loading: false,
      tableData: [],
      total: 0,
      searchInfo: {
        ipi: 1,
        ips: 10,
        order: 1,
        userId: "",
      },
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("homeUserInfo"));
    this.search();
  },
  methods: {
    handleCancel(row) {
      this.$confirm("您确定取消订阅吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.$get(this.$Url.personal.canalChain, {
          id: row.id,
        }).then((res) => {
          this.$message({
            type: "success",
            message: "取消订阅成功！",
          });
          setTimeout(() => {
            this.search();
          }, 500);
        });
      });
    },
    handleCurrentChange(val) {
      // console.log("val1", val);
      this.searchInfo.ipi = val;
      this.search();
    },
    search() {
      this.searchInfo.userId = this.userInfo.id;
      this.loading = true;
      this.$get(this.$Url.personal.chainList, this.searchInfo).then((res) => {
        const data = res.data;
        this.loading = false;
        this.total = data.total;
        this.tableData = data.result;
      });
    },
  },
};
</script>
<style lang="scss">
.el-message-box{
  .el-button--primary {
    color: #FFF;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
.el-button--primary:active,.el-button--primary:focus,.el-button--primary:hover{
  color: #FFF !important;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
.el-button:focus, .el-button:hover {
    color: $mainColor;
    border-color: $mainColor;
    background-color: $hoverColor;
}
}
</style>
<style lang="scss" scoped>
.el-button--text{
  color: $mainColor;
}
.table {
  margin: 10px 0 20px;
}
.img {
  width: 18px;
  margin: -3px 10px 0 0;
}
</style>
